<template>
  <div class="registerDetail">
    <!-- 跟踪单详情 -->
    <!-- <div class="top_navbar"> -->
    <van-nav-bar
      :fixed="true"
      :placeholder="true"
      :title="$route.meta.title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      right-text="战败登记"
      @click-right="trackFailed()"
    />
    <!-- </div> -->

    <div class="detail_header flex">
      <div class="detail_header_lt">
        <div class="carNo flex">
          {{ dataSource.carNo }}
          <i class="iconfont icon-right"></i>
        </div>
        <div class="hank" v-if="dataSource.repairInsCmp">
          {{ dataSource.repairInsCmp }}
        </div>
      </div>
      <div class="detail_header_rt">
        <a class="flex" @click="handleTel(dataSource.mobile1)">
          <i class="iconfont icon-tel"></i>
          <div class="txt">联系车主</div>
        </a>
      </div>
    </div>

    <!-- 表单 -->
    <div class="formData">
      <van-form>
        <van-field
          v-model="dataSource.depOrgName"
          name="品牌"
          label="品牌"
          placeholder="请选择"
          input-align="right"
          :rules="[{ required: true }]"
          readonly
        />
        <van-field
          v-model="dataSource.fixCenterName"
          name="维修中心"
          label="维修中心"
          input-align="right"
          placeholder="请选择"
          readonly
        />
        <van-field
          v-model="dataSource.vinCode"
          name="车辆"
          label="车辆"
          input-align="right"
          placeholder="请输入VIN"
          :rules="[{ required: true }]"
          readonly
        />

        <van-field
          v-model="dataSource.carNo"
          name="车牌号码"
          label="车牌号码"
          input-align="right"
          placeholder="请输入车牌号码"
          :rules="[{ required: true }]"
          readonly
        />
        <van-field
          v-if="dataSource.tunfixReasonName"
          v-model="dataSource.tunfixReasonName"
          name="战败原因"
          label="战败原因"
          input-align="right"
          readonly
          :rules="[{ required: true }]"
        />

        <van-field
          v-model="dataSource.customerName"
          name="客户名称"
          label="客户名称"
          input-align="right"
          placeholder="请输入客户名称"
          readonly
        />

        <van-field
          v-model="dataSource.mobile1"
          name="客户联系电话"
          label="客户联系电话"
          input-align="right"
          placeholder="请输入客户联系电话"
          readonly
        />

        <van-field
          v-model="dataSource.ogPsnName"
          name="外服人员"
          label="外服人员"
          input-align="right"
          readonly
          :rules="[{ required: true }]"
        />
        <van-field
          v-model="dataSource.serverPersonName"
          name="服务顾问"
          label="服务顾问"
          input-align="right"
          readonly
          :rules="[{ required: true }]"
        />

        <van-field
          readonly
          clickable
          name="currentDate"
          :value="dataSource.accidentDate"
          input-align="right"
          label="出险时间"
          placeholder="请选择时间"
        />
        <van-popup v-model="showTimerPicker" position="bottom">
          <van-datetime-picker
            type="datetime"
            @confirm="onConfirm($event, 'accidentDate')"
            @cancel="showTimerPicker = false"
            :formatter="formatter"
          />
        </van-popup>

        <!-- <van-field
          readonly
          clickable
          name="picker"
          :value="dataSource.isRepaired"
          label="是否推修"
          placeholder="请选择"
          input-align="right"
        /> -->
        <van-popup v-model="showSelectPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="handleSelectConfirm"
            @cancel="showSelectPicker = false"
            value-key="name"
          />
        </van-popup>

        <van-field
          :value="`${fileList.length}/9`"
          name="现场照片"
          label="现场照片"
          placeholder="请选择"
          input-align="right"
          readonly
          required
        />
        <div class="imageUrl flex">
          <img
            class="imageUrl_item"
            v-for="(item, index) in fileList"
            :key="index"
            :src="item"
          />
        </div>

        <van-field
          v-model="dataSource.remark"
          name="备注"
          label=""
          type="textarea"
          input-align="left"
          placeholder="备注"
          readonly
          autosize
          :rules="[{ required: true, message: '请填写' }]"
        />

        <van-field
          v-model="dataSource.accidentAddress"
          name="出险地点"
          label="出险地点"
          input-align="right"
          placeholder=""
          readonly
          @click="getLocal"
        />
      </van-form>
      <div id="container"></div>
      <!-- <div
        v-if="dataSource.billStatus == '保存' ? true : false"
        class="submitBtn"
        @click="editData"
      >
        编辑
      </div> -->
    </div>
    <MultipleSelect
      :visible="showMultipleVisible"
      @close="showMultipleVisible = false"
      @multipleSubmit="multipleSubmit"
      :value="dataSource.repairInsCmp"
      :list="empList"
    ></MultipleSelect>
  </div>
</template>

<script>
import {
  Search,
  Empty,
  Field,
  Form,
  Uploader,
  DatetimePicker,
  Toast,
  Notify,
} from "vant";
import MultipleSelect from "../../components/MultipleSelect/index.vue";
import outApi from "@/api/outAPi";
import commonApi from "@/api/commonApi";
import { getCookies, isPhone } from "@/utils/util.js";
const base_url = process.env.BASE_API;
export default {
  name: "registerDetail",
  components: {
    Search,
    Empty,
    Field,
    Form,
    Uploader,
    DatetimePicker,
    MultipleSelect,
    Toast,
    Notify,
  },
  data() {
    return {
      showTimerPicker: false,
      dataSource: {
        billId: "", //单据ID
        carNo: "", //车牌号
        newCarNo: "", //单据车牌号
        vinCode: "", //车架号
        billStatus: "", //单据状态
        customerName: "", //客户名称
        mobile1: "", //电话
        depOrgName: "", //品牌
        fixCenterName: "", //维修中心
        repairInsCmp: "", //保险公司
        ogpsnName: "", //外服登记人员
        ogpsnId: "", //外服登记人员
        isRepaired: "", //是否推修
        accidentDate: "", //出现时间
        bizDate: "", //业务日期
        remark: "", //备注
        accidentAddress: "福建厦门", //出险地点
        tunfixReasonName: "",
      },
      uploader: [],
      columns: [],
      nowLat: 39.98412, // 纬度
      nowLng: 116.307484, // 经度
      map: null, //
      showSelectPicker: false,
      disabled: false,
      showMultipleVisible: false,
      empList: [
        { name: "服务人员1", value: 1 },
        { name: "服务人员2", value: 2 },
        { name: "服务人员2", value: 3 },
        { name: "服务人员2", value: 4 },
        { name: "服务人员2", value: 5 },
        { name: "服务人员2", value: 6 },
        { name: "服务人员2", value: 7 },
        { name: "服务人员2", value: 8 },
        { name: "服务人员2", value: 9 },
      ],
      field: "",
      fieldName: "",
      userId: getCookies("userId"),
      isEdit: isPhone(),
      map: null,
      fileList: [],
    };
  },
  created() {
    // this.mapInit(this.nowLng, this.nowLat, 16);
  },
  mounted() {
    if (this.$route.query && this.$route.query.billId) {
      this.billId = this.$route.query.billId;
      this.getDetail(this.billId);
      this.getFileList(this.billId);
    }
  },
  methods: {
    getFileList(billId) {
      commonApi.getFileList({ billId }).then((res) => {
        res.records &&
          res.records.map((item) => {
            this.fileList.push(
              `${base_url}/proxy/cam/file/download?attachId=${item.ATTID}&attachName=${item.ATTNAME}`
            );
          });
      });
    },

    getDetail(billId) {
      outApi
        .queyCarAccidentTrackingBillById({ billId, userId: this.userId })
        .then((res) => {
          this.dataSource = res.data;
          this.dataSource.accidentAddress = this.dataSource.accidentAddress
            ? this.dataSource.accidentAddress
            : "暂无地址信息";
          let center = new TMap.LatLng(
            this.dataSource.latitude,
            this.dataSource.longitude
          );
          this.map = new TMap.Map(document.getElementById("container"), {
            center: center, //设置地图中心点坐标
            zoom: 17.2, //设置地图缩放级别
            pitch: 30.5, //设置俯仰角
            rotation: 45, //设置地图旋转角度
          });
        });
    },
    // 地图初始化
    // mapInit(lng, lat, zoom) {
    //   let _this = this;
    //   // 在页面渲染完成后进行地图的实例化
    //   this.$nextTick(() => {
    //     _this.map = new TMap.Map(document.getElementById("container"), {
    //       // 地图的中心地理坐标。
    //       center: new TMap.LatLng(lat, lng),
    //       zoom: zoom,
    //     });
    //   });
    // },
    // 选择下拉
    handleSelect(field, fieldName) {
      if (this.disabled) {
        return;
      }
      this.showSelectPicker = true;
      if (field == "isRepaired") {
        this.columns = [
          { name: "是", value: 1 },
          { name: "否", value: 2 },
        ];
      } else if (field == "fixCenterId") {
        this.columns = [
          { name: "厦门保时捷", value: 1 },
          { name: "厦门奥迪", value: 2 },
        ];
      }
      this.field = field;
      this.fieldName = fieldName;
    },
    // 选择下拉确认
    handleSelectConfirm(value, index) {
      this.dataSource[this.field] = value.value;
      this.dataSource[this.fieldName] = value.name;
      this.showSelectPicker = false;
    },
    getLocal() {
      console.log(1111);
    },

    onConfirm(val, field) {
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      // let second = val.getSeconds()
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      // if (second >= 0 && second <= 9) { second = `0${second}` }
      this.dataSource[field] = `${year}-${month}-${day} ${hour}:${minute}:00`;
      this.showTimerPicker = false;
    },

    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      } else if (type === "hour") {
        return `${value}时`;
      } else if (type === "minute") {
        return `${value}分`;
      } else if (type === "second") {
        return `${value}秒`;
      }
      return value;
    },
    handleMoreSelect() {
      this.showMultipleVisible = true;
    },
    // 多选确认
    multipleSubmit(data) {
      if (data && data.length != 0) {
        this.dataSource.ogpsnName = data.map((item) => item.name).join(",");
        this.dataSource.ogpsnId = data.map((item) => item.value).join(",");
      } else {
        this.dataSource.ogpsnName = "";
      }
    },
    editData() {
      localStorage.setItem("reBillId", this.dataSource.billId);
      this.$router.push({
        path: "/registerEdit",
      });
    },
    handleTel(tel) {
      if (isPhone()) {
        window.location.href = `tel:${tel}`;
      } else {
        Toast("请在手机端使用此功能");
      }
    },
    goCarDetail() {
      this.$router.push({
        path: "/carOrderDetail",
        query: { billId: this.dataSource.carId },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    trackFailed() {
      if (this.dataSource.billStatus == "保存") {
        this.$router.push({
          path: "registerFail",
          query: {
            billId: this.dataSource.billId,
            carNo: this.dataSource.carNo,
          },
        });
      } else {
        Notify({ type: "danger", message: "当前状态无法进行战败登记" });
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 4176972 */
  src: url("//at.alicdn.com/t/c/font_4176972_s8s6zd59eop.woff2?t=1689868658391")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_4176972_s8s6zd59eop.woff?t=1689868658391")
      format("woff"),
    url("//at.alicdn.com/t/c/font_4176972_s8s6zd59eop.ttf?t=1689868658391")
      format("truetype");
}
body {
  // background: #f3f3f3;
}
.flex {
  display: flex;
  align-items: center;
}
.registerDetail {
  background: #f3f3f3;
  overflow: hidden;
  .detail_header {
    justify-content: space-between;
    margin: 0.2rem 0.2rem;
    border-radius: 5px;
    background: #fff;
    padding: 0.3rem;
    .detail_header_lt {
      .carNo {
        font-size: 0.32rem;
        font-weight: bold;
        .icon-right {
          margin-left: 0.2rem;
          color: #409eff;
        }
      }
      .hank {
        font-size: 0.28rem;
        color: #666;
        margin-top: 0.2rem;
      }
    }
    .detail_header_rt {
      justify-content: flex-start;
      .txt {
        font-size: 0.28rem;
        color: #161616;
      }
      .icon-tel {
        color: #fff;
        background: #35bc04;
        font-size: 0.32rem;
        padding: 0.1rem;
        border-radius: 50%;
        margin-right: 0.1rem;
      }
    }
  }
  .formData {
    background: #fff;
    padding-bottom: 0.5rem;
  }
}
/deep/.van-field__error-message {
  text-align: right;
}
.submitBtn {
  background: #409eff;
  color: #fff;
  width: 75%;
  margin: auto;
  text-align: center;
  padding: 0.25rem;
  border-radius: 5px;
  margin-top: 0.6rem;
  font-size: 0.3rem;
}
#container {
  overflow: hidden;
  width: 100%;
  height: 200px;
  margin: 0;
  font-family: "微软雅黑";
}
.imageUrl {
  padding: 10px 16px;
  .imageUrl_item {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    margin-right: 10px;
  }
}
</style>
